<template>
  <div>
    <!-- 新建 -->
    <el-dialog
      title="添加客户"
      :visible.sync="addCustomerShow"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="1200px"
      top="40px"
      class="add"
      @close="closeAdd"
    >
      <el-form
        class="row"
        :inline="true"
        label-suffix="："
        size="mini"
        :model="search"
      >
        <el-form-item label="客户名称/金蝶编码">
          <el-input
            v-model="search.name"
            clearable
            placeholder="请输入客户名称/金蝶编码"
            class="w300"
          />
        </el-form-item>
        <!-- <el-form-item label="金蝶编码">
          <el-input
            v-model="search.king_code"
            clearable
            placeholder="请输入金蝶编码"
            class="w300"
          />
        </el-form-item> -->

        <el-form-item>
          <el-button type="primary" @click="getList('search')">搜 索</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :data="list"
        size="small"
        :cell-style="$style.cellStyle"
        :header-cell-style="$style.rowClass"
        @selection-change="handleSelectionChange"
      >
        <ElTableColumn type="selection" width="50" />
        <ElTableColumn label="客户名称" prop="name" />
        <ElTableColumn label="客户金蝶编码" prop="king_no" />
      </el-table>

      <!-- <pagination
        class="page tc mt10"
        :total="page.total"
        :page.sync="page.page"
        :limit.sync="page.limit"
        @pagination="getList"
      /> -->

      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeAdd">取 消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="selectGoods"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
class Search {
  name = '';
  king_code = '';
}
class Page {
  total = 0;
  page = 1;
  limit = 10;
}
// import pagination from '@/components/Pagination';
import { customerList } from '@/api/order';
export default {
  name: 'AddCustomer',
  // components: {
  //   pagination
  // },
  data() {
    return {
      search: new Search(),
      page: new Page(), // 分页
      addCustomerShow: true,
      list: [],
      idList: [],
      customer_ids: []
    };
  },
  mounted() {
    // this.getList();
  },
  methods: {
    async getList(option) {
      if (option === 'search') this.page = new Page();
      const { data } = await customerList({
        name: this.search.name,
        customer_type: 1,
        not_customer_ids: this.customer_ids
      });
      this.list = data;
      // this.page.total = data.dataCount;
    },
    open(customer_ids) {
      this.customer_ids = customer_ids;
    },
    // 改变表格选中状态
    handleSelectionChange(val) {
      this.idList = val.map((i) => {
        return i;
      });
    },
    selectGoods() {
      this.$emit('goodsList', this.idList);
      this.closeAdd();
    },
    closeAdd() {
      this.$emit('closeAdd', false);
    }
  }
};
</script>

<style lang="scss" scoped>
.add {
  ::v-deep.el-dialog {
    height: calc(100vh - 80px);
    overflow-y: auto;
  }
  ::v-deep.el-dialog__body {
    padding: 10px 20px;
  }
}
</style>
